<template>
  <div class="main">
    <div class="pro flex-between flex-align-items-center">
      <div class="pro-info flex">
        <img :src="detail.pic">
        <div class="pro-desc flex-between flex-column">
          <p class="font-20">商品名称</p>
          <p class="font-24-B">{{ detail.name }}</p>
          <p class="font-20">商品链接</p>
          <p class="font-20 pointer">{{ detail.link }}</p>
        </div>
      </div>
      <div class="data">
        <div class="data-item flex-between flex-column">
          <p class="font-14">合作视频数</p>
          <h3 class="font-28">{{ numConvert(detail.cooperateVideoNum, 2) }}</h3>
        </div>
        <div class="data-item flex-between flex-column">
          <p class="font-14">链接访问量</p>
          <h3 class="font-28">{{ numConvert(detail.linkVisitNum, 2) }}</h3>
        </div>
        <div class="data-item flex-between flex-column">
          <p class="font-14">视频播放量</p>
          <h3 class="font-28">{{ numConvert(detail.videoPlayNum, 2) }}</h3>
        </div>
        <div class="data-item flex-between flex-column">
          <p class="font-14">视频评论数</p>
          <h3 class="font-28">{{ numConvert(detail.videoCommentNum, 2) }}</h3>
        </div>
        <div class="data-item flex-between flex-column">
          <p class="font-14">视频点赞数</p>
          <h3 class="font-28">{{ numConvert(detail.videoPraiseNum, 2) }}</h3>
        </div>
      </div>
    </div>

    <div class="wrap">
      <div class="search-wrap flex flex-align-items-center">
        <div class="search-item flex flex-align-items-center">
          <p class="search-item-label font-14">红人名称：</p>
          <el-input v-model="form.keyword" placeholder="请输入"></el-input>
        </div>
        <p class="search-btn pointer font-14" @click="currentChange(1)">查询</p>
      </div>
      <el-table :data="tableData" :height="tableHeight" style="width: 100%;" class="table">
        <el-table-column width="180" fixed="left">
          <template #default="scope">
            <div class="row-name flex flex-align-items-center">
              <img :src="scope.row.avatar">
              <p class="font-16-B ellipsis-1">{{ scope.row.name }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="source" label="所属平台" width="100" />
        <el-table-column label="粉丝数" width="100">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.fansNum, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="shortLink" label="短链接" width="140" />
        <el-table-column prop="videoLink" label="上线视频链接" width="140" />
        <el-table-column label="短链接访问量" width="140">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.shortLinkVisitNum, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column label="视频播放量" width="140">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.videoPlayNum, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column label="视频评论数" width="140">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.videoCommentNum, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column label="视频点赞量" width="140">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.videoPraiseNum, 2) }}</p>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination flex">
        <el-pagination layout="prev, pager, next, total" :total="form.total" @current-change="currentChange" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import api from '@/api/index.js';
import numConvert from '@/js/numConvert';
import { useRoute } from 'vue-router';

const route = useRoute();

const detail = ref({});
const form = ref({
  page: 1,
  perPage: 10,
  productId: route.query.id
});
const tableHeight = ref(window.innerHeight - 485);
const tableData = ref([]);

const queryProductDetail = () => {
  api.pro.queryProductDetail({
    productId: route.query.id
  }).then(res => {
    detail.value = res;
  });
}
const queryProductInfluencerList = () => {
  api.pro.queryProductInfluencerList(form.value).then(res => {
    tableData.value = res.list;
    form.value.total = res.page.total;
  });
}
const currentChange = e => {
  form.value.page = e;
  queryProductInfluencerList();
}

onMounted(() => {
  queryProductDetail();
  queryProductInfluencerList();
});
</script>

<style lang="less" scoped>
.main {
  padding: 16px;
}

.pro {
  height: 220px;
  padding: 32px 0 32px 40px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .04);
  margin-bottom: 24px;

  .pro-info {
    img {
      width: 174px;
      height: 156px;
      border-radius: 4px;
      margin-right: 24px;
    }

    .pro-desc {
      p {
        &.font-20 {
          color: rgba(51, 51, 51, .65);
        }

        &.font-28-B {
          color: #333;
        }
      }
    }
  }

  .data {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: 100%;

    .data-item {
      height: 66px;
      padding: 0 32px;
      align-items: flex-end;
      position: relative;
      margin-bottom: 24px;

      &::after {
        content: "";
        width: 1px;
        height: 40px;
        background: #e9e9e9;
        position: absolute;
        top: 12px;
        right: 0;
      }

      &:nth-child(4)::after {
        display: none;
      }

      p {
        color: rgba(51, 51, 51, .65);
      }

      h3 {
        color: #333;
      }
    }
  }
}

.wrap {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .04);
  padding: 16px;

  .search-wrap {
    padding-bottom: 16px;
    border-bottom: 1px solid #f2f3f5;
    margin-bottom: 16px;

    .search-item {
      margin-right: 32px;

      p {
        color: #333;
      }

      &::v-deep {
        .el-input {
          width: 202px;
          height: 32px;
        }
      }
    }

    .search-btn {
      min-width: 70px;
      padding: 0 8px;
      height: 32px;
      border-radius: 2px;
      background: @main-color;
      color: #fff;
      text-align: center;
      line-height: 32px;
    }
  }

  .table {
    .row-name {
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 16px;
      }
    }
  }

  .pagination {
    justify-content: end;
    margin-top: 16px;
  }
}
</style>
